<template>
  <div class="context">
   <div class="center">
 <div class="xi"  >
<div class="yuan">
4
</div> 
<div class="zho">
{{ this.$route.query.i }}
</div>
</div>
<!-- 内容区域 -->
<div class="text richText" v-html="list">

</div>
 </div>
</div>
</template>

<script>
import { coffeeMan} from "@/api/index"
export default {
  data(){
    return{
   list:'',
    }
  },
  created(){
    coffeeMan(sessionStorage.getItem("coffeetitle")).then((res)=>{
      if(res.data.code==200){
     this.list=this.dataHTML( res.data.data.coffeeMan)
       
      }
     
    })
  },
}
</script>

<style scoped>
.context{
       width: 100%;
      display: flex;
     justify-content: center;
     background-color: #f0eff5;
   }
   .center{
   width: 98%;
}
.xi{
 width: 100%;
 margin-top: .05rem;
display: flex;  
}
   .xi .yuan{
     width: 0.16rem;
   height: 0.16rem;
   margin-left: 0.1rem;
   font-weight: 700;
   text-align: center;
   line-height: .16rem;
   border-radius: 50%;
   margin-top: 0.05rem;
   border: 1px solid black;
   }
 
   /* 中间区域 */
   .xi .zho{

     height: 100%;
     line-height: .3rem;
     padding-left: 5px;
    font-weight: 700;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
   }
      /* 内容区域 */
      .text{
      width: 100%;
      font-weight: 700;
      word-wrap:break-word;
      text-indent:.2rem;
 
   }
</style>